import React from 'react';
import './UploadDialog.css';

/**
 * 上传进度对话框
 * @param {boolean} visible - 是否显示对话框
 * @param {string} currentTask - 当前任务描述（如 "图片上传中"、"视频1上传中"）
 * @param {number} progress - 当前任务进度（0-100）
 * @param {number} totalTasks - 总任务数
 * @param {number} completedTasks - 已完成任务数
 * @param {string} phase - 当前阶段（uploading | uploaded | updating | error）
 * @param {Function} onRetry - 重试回调函数
 * @param {Function} onCancel - 取消回调函数
 */
function UploadDialog({ visible, currentTask, progress, totalTasks, completedTasks, phase, onRetry, onCancel }) {
  if (!visible) return null;

  const isError = phase === 'error';
  const isUpdating = phase === 'updating';

  return (
    <div className="upload-dialog-overlay" onClick={(e) => e.stopPropagation()}>
      <div className="upload-dialog">
        <div className="upload-dialog-header">
          <h3>{isError ? '⚠️ 更新失败' : isUpdating ? '更新课程信息' : '文件上传中'}</h3>
        </div>
        
        <div className="upload-dialog-body">
          {/* 当前任务 */}
          <div className="upload-task">
            <div className={`task-name ${isError ? 'task-error' : ''}`}>{currentTask}</div>
            {!isError && (
              <>
                <div className="task-progress-bar">
                  <div 
                    className="task-progress-fill" 
                    style={{ width: `${progress}%` }}
                  ></div>
                </div>
                <div className="task-percentage">{Math.round(progress)}%</div>
              </>
            )}
          </div>
          
          {/* 总体进度 */}
          {!isError && (
            <div className="upload-overall">
              <div className="overall-text">
                总进度: {completedTasks} / {totalTasks}
              </div>
              <div className="overall-progress-bar">
                <div 
                  className="overall-progress-fill" 
                  style={{ width: `${(completedTasks / totalTasks) * 100}%` }}
                ></div>
              </div>
            </div>
          )}
          
          {/* 提示信息 */}
          {!isError && !isUpdating && (
            <div className="upload-tips">
              <p>⏳ 正在上传文件，请勿关闭页面...</p>
              <p>📡 上传速度取决于您的网络状况</p>
            </div>
          )}
          
          {isUpdating && (
            <div className="upload-tips">
              <p>✅ 文件上传完成，正在保存课程信息...</p>
            </div>
          )}
          
          {/* 错误提示和操作按钮 */}
          {isError && (
            <div className="upload-error-actions">
              <div className="error-tips">
                <p>✅ 文件已成功上传到服务器</p>
                <p>❌ 但课程信息保存失败，请重试</p>
              </div>
              <div className="error-buttons">
                <button 
                  className="retry-btn" 
                  onClick={onRetry}
                >
                  重试保存
                </button>
                <button 
                  className="cancel-btn" 
                  onClick={onCancel}
                >
                  稍后处理
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default UploadDialog;

